<template>
    <div id="regist-root">
        <Navbar>注册</Navbar>
        <div id="Regist">
            <form @submit.prevent="submit">
                <div>
                    <label class="fa fa-user-o"></label>
                    <input type="text" placeholder="请输入3-12位数字，字母，下划线" v-model="registForm.account">
                </div>
            
                <div>
                    <label class="fa fa-lock"></label>
                    <input type="text" placeholder="请输入6位数字密码" v-model="registForm.psw">
                </div>
                <div>
                    <label class="fa fa-lock"></label>
                    <input type="text" placeholder="请再次输入密码" v-model="registForm.confirm">
                </div>
                <div id="ccap">
                    <label class="fa fa-file-o"></label>
                    <input type="text" placeholder="请输入正确的验证码" id="input2"><img src="/api/users/captcha" id="cap" @click="refreshCaptcha" v-model="registForm.captcha">
                </div>
                <div id="check">
                    <input type="checkbox" v-model="registForm.checked">
                    <label for="">我已看过并同意《美乐乐用户注册协议》</label>
                </div>
                <div>
                    <button>立即注册</button>
                </div>
        </form>
    </div>
   
</div>

</template>

<script>
import Navbar from "../components/Navbar.vue";
import {mapState,mapActions,mapMutations} from 'vuex';
// import {Toast} from 'vux';
export default {
    components:{
        Navbar,
    },
    methods:{
        ...mapActions({
            submit:"registSubmit"
        }),
        refreshCaptcha(){
             $("#cap").attr("src","");
             $("#cap").attr("src","/api/users/captcha?"+Math.random());
        }
    },
    computed:{
        ...mapState({
            registForm:state=>state.user.registForm,
        }),
    }
}
</script>

<style scoped>
#regist-root{
    background-color: #eeeeee;
}
#Regist{
    margin-top:20px;
    width:100%;
    text-align: center;
}
#Regist div{
    background-color: white;
}
label{
    font-size: 22px;
    color:#666666;
}
input{
    border: none;
    border-bottom: 1px solid #dddddd;
    width:90%;
    height: 50px;
    padding-left:10px;
}

button{
    width:90%;
    height: 40px;
    background-color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin-top: -10px;
}
#check{
    width:100%;
}
#check input{
    width:20%;
    position: relative;
    top:-4px;
}
#check label{
     width:80%;
    font-size: 13px;
    position: relative;
    top:-25px;
    left:-25px;
}



#input2{
    width:50%;
}
img{
    position:relative;
    top:10px;
    cursor:pointer;
    width:40%;
}
</style>